<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/videoWeb/layui-v2.5.7/layui/css/layui.css">
    <link rel="stylesheet" href="/videoWeb/element/element.css">
    <script src="/videoWeb/js/Jquery.js" ></script>
    <script src="/videoWeb/layui-v2.5.7/layui/layui.js"></script>
    <script src="/videoWeb/js/vue.js"></script>
    <script src="/videoWeb/element/element.js"></script>
    <title>视频管理</title>
</head>
<body>
<div id="app">

    <el-container style="height: 100%;">
        <el-aside width="200px">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="2">
                            <i class="el-icon-video-camera-solid"></i>
                            <span slot="title">视频管理</span>
                        </el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right;
                       font-size: 12px;
                       background-color: white;
                       border-bottom: 1px solid rgb(230,230,230);">

                <el-breadcrumb separator="/" style="float: left;margin-top:25px;">
                    <el-breadcrumb-item :to="{ path: '/' }">导航一</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/videoWeb/afters/video.html">视频管理</a></el-breadcrumb-item>
                </el-breadcrumb>

            </el-header>

            <el-main>
                <div class="demo-input-suffix" style="margin-bottom: 10px">
                    <el-input placeholder="请输入类型名称" prefix-icon="el-icon-search" v-model="typeName" style="width: 20%">
                    </el-input>
                    <el-input placeholder="请输入用户名称" prefix-icon="el-icon-search" v-model="userName"style="width: 20%" >
                    </el-input>
                    <el-button @click="handleCurrentChange" type="primary" icon="el-icon-search">搜索</el-button>
                </div>

                <template>
                    <el-table :data="videoList" stripe style="width: 100%">
                        <el-table-column prop="id" label="Id"  align="center"></el-table-column>
                        <el-table-column prop="videoTitle" label="视频标题"  align="center"></el-table-column>
                        <el-table-column prop="explain" label="表述内容" width="100%" align="center"></el-table-column>
                        <el-table-column label="视频首图"  align="center">
                            <template slot-scope="scope">
                                <el-popover placement="top-start" title="" trigger="hover">
                                    <img :src="scope.row.imgSrc" alt="" style="width: 150px;height: 150px">
                                    <img slot="reference" :src="scope.row.imgSrc" style="width: 100%;height: 100%">
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column prop="typeName" label="视频类型"  align="center"></el-table-column>
                        <el-table-column label="视频展示"  align="center">
                            <template slot-scope="scope">
                                <video slot="reference" :src="scope.row.videoSrc" style="width: 100%;height: 100%"></video>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建日期" width="100%" align="center"></el-table-column>
                        <el-table-column prop="username" label="用户姓名"  align="center"></el-table-column>
                        <el-table-column prop="headImg" label="用户头像" width="100%" align="center">
                            <template slot-scope="scope" align="center">
                                <el-popover placement="top-start" title="" trigger="hover">
                                    <img :src="scope.row.headImg" alt="" style="width: 150px;height: 150px">
                                    <img slot="reference" :src="scope.row.headImg" style="width: 100%;height: 100%">
                                </el-popover>
                            </template>
                        </el-table-column>

                        <el-table-column prop="videoView" label="浏览次数"  align="center"></el-table-column>
                        <el-table-column label="操作" width="200px" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="edit(scope.row.id)" icon="el-icon-edit">编辑</el-button>
                                <el-button size="mini" type="danger" slot="reference" icon="el-icon-delete" @click="deletePrompt(scope.row.videoTitle,scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="pageNo"
                               :page-size="pageSize"
                               layout="prev, pager, next, jumper"
                               :total="pagesTotalCount" style="margin-top: 10px">
                </el-pagination>
            </el-main>

        </el-container>
    </el-container>

</div>
</body>

<style lang="scss" scoped>

    el-menu {
        border-right: none;
    }
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

</style>
<script>
    new Vue({
        el:'#app',
        data:{
            videoList:[],
            //分页参数
            pageNo:1,//当前页码
            pageSize:10,//每页个数
            pageTotal:0,//页码数
            pagesTotalCount:0,//总条数
            //搜索内容
            typeName:'',
            userName:'',
        },
        mounted:function(){
            this.handleCurrentChange();
        },
        methods:{
            handleCurrentChange:function() {//分页改变时会触发
                var that = this;
                $.ajax({
                    url:"/videoWeb/searchVideo",
                    data:{
                        pageNo:this.pageNo,
                        pageSize:this.pageSize,
                        typeName:this.typeName,
                        userName:this.userName,
                    },
                    success:function(res){
                        console.log(res);
                        that.videoList = res.items;
                        that.pageTotal = res.pageTotal;
                        that.pagesTotalCount = res.pagesTotalCount;
                    }
                })
            },
            deleteVideo(id){//通过id删除视频信息
                var that = this;
                $.ajax({
                    url:"/videoWeb/deleteVideo",
                    data:{
                        id:id,
                        pageNo:this.pageNo,
                        pageSize:this.pageSize,
                        typeName:this.typeName,
                        userName:this.userName,
                    },
                    success:function(res){
                        that.videoList = res.items;
                        that.pageTotal = res.pageTotal;
                        that.pagesTotalCount = res.pagesTotalCount;
                    }
                })
            },
            deletePrompt(videoTitle,id) {//删除提示框
                this.$confirm('确定要删除视频【'+ videoTitle +'】吗?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteVideo(id)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUserList();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已经取消!'
                    });
                });
            },
        }
    })
</script>
</html>
